
<template>
  <div class="components-list">
    <draggable
        tag="ul"
        :value="list"
        v-bind="{
	      group: { name: 'form-draggable', pull: 'clone', put: false },
	      sort: false,
	      animation: 180,
	      ghostClass: 'moving'
	    }"
        :force-fallback="true"
        @start="handleStart($event, list)">
      <li
          class="form-edit-widget-label"
          v-for="(val, index) in list"
          :key="index"
          @click="$emit('handleListPush', val)">

        <i :class="val.icon" class="form-icon"></i>
          <span>{{ val.label }}</span>

      </li>
    </draggable>
  </div>

</template>
<script>
import draggable from 'vuedraggable';

export default {
  name: 'DragItem',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    draggable,
  },
  methods: {
    handleStart(e, list) {
      this.$emit('start', list, e.oldIndex);
    },
  },
};
</script>
